<template>
	<div>
		<tableIndex
			ref="tableIndexRef"
			:tableData="state.tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="fields"
			:height="500"
			:page="page"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #right-btn>
				<div style="float: right">
					<!-- <el-button size="small" plain class="update" @click="addHandler"
						><svg-icon icon-class="add-icon" />添加</el-button
					> -->
					<el-button
						size="small"
						plain
						class="button_edit"
						@click="onExport(getSearch())"
						><svg-icon icon-class="export" class="m-r5"/>导出Excel表</el-button
					>
				</div>
			</template>

			<template #operate>
				<el-table-column label="操作" width="200" align="center" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="button_view"
							@click="lookItemHandler(row)"
							type="primary"
							>查看</el-button
						>
						<el-button
							size="small"
							class="button_edit"
							@click="lookContractHandler(row)"
							type="primary"
							>合同账单</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
		<contractDialog ref="contractD"></contractDialog>
	</div>
</template>
<script setup>
import { contractApi, projectConfigApi } from "@/api/project";

import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import TableIndex from "@/components/table/index.vue";
import { deriveHandelFnc } from "@/hooks/downCommon";
import "@/views/constructionProjectManage/static/button.scss";
import { ElButton, ElInput, ElMessageBox, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import ContractDialog from "./contractDialog.vue";
// pageList
const exportConfig = reactive({
	fileName: "合同信息",
	apiPath: "contractExport",
	form: {},
});
const state = reactive({
	tableData: [],
});
const contractD = ref(null);
const tableIndexRef = ref(null);
let tableHead = reactive([
	{
		prop: "contractId",
		label: "合同编号",
		width: "180",
	},
	{
		prop: "contractName",
		label: "合同名称",
	},
	{
		prop: "signB",
		label: "签约对象",
	},
	// {
	// 	prop: "capitalFlow",
	// 	label: "合同性质",
	// },
	{
		prop: "typeName",
		label: "合同类型",
	},
	{
		prop: "contractAmount",
		label: "合同金额",
	},
	{
		prop: "signTime",
    label: "合同签章时间",
    width: 120,
	},
	{
		prop: "serviceStartTime",
    label: "合同履约开始时间",
    width: 150,
	},
	{
		prop: "serviceEndTime",
    label: "合同履约结束时间",
    width: 150,
	},
	{
		prop: "departmentName",
    label: "合同经办部门",
    width: 120,
	},
	{
		prop: "userName",
		label: "经办人",
	},
	{
		prop: "examineStatusName",
		label: "审批状态",
	},
]);
const page = reactive({
	page: 1,
	pageSize: 10,
	total: 0,
});
const fields = ref([
	{
		key: "keywords",
		label: "合同名称",
		type: "input",
		placeholder: "合同名称关键字搜索",
	},
	{
		key: "projectSetId",
		label: "项目集筛选",
		type: "select",
		options: {
			list: [],
		},
	},
]);
const { onExport } = deriveHandelFnc(exportConfig);
//分页接口请求
const getPage = (e) => {
	contractApi
		.pageList({
			pageNum: page.page,
			pageSize: page.pageSize,
			param: {
				...e,
				type:3
			},
		})
		.then((res) => {
			if (res.code == 200) {
				state.tableData = res.data.content;
				page.total = res.data.totalSize;
			}
		});
};

let searchObj = ref({});

//搜索接口请求
const searchList = (e) => {
  searchObj.value = e;
	getPage(e);
};

//分页
const pageChange = (e) => {
	page.page = e.page;
	page.pageSize = e.limit;

  getPage(searchObj.value);
};

let router = useRouter();
//添加
const addHandler = () => {
	router.push({
		path: `/constructionProjectManage/contract/addContract/id=${""}`,
	});
};

//项目集
const getProjectSets = () => {
	projectConfigApi.getProjectSets({type: 3}).then((res) => {
		if (res.code === '200') {
			fields.value[1].options.list = res.data.map((v) => {
				return {
					label: v.projectSetName,
					value: v.projectSetId,
				};
			});
		}
	});
};

const getSearch = () => {
	return tableIndexRef.value.getSearchData();
};

//查看合同账单
const lookContractHandler = (row) => {
	contractD.value.state.dialogVisible = true;
	contractD.value.state.contractId = row.contractId;
};

//查看合同
const lookItemHandler = (row) => {
	router.push({
		path: `/constructionProjectManage/projectImplementationTask/callForBids/projectId=${
			row.projectId
		}&projectTaskId=${row.projectTaskId}&itemId=${
			row.itemId
		}&isLook=${1}&type=1`,
	});
};
onMounted(() => {
	//获取项目列表
	getPage(searchObj.value);
	getProjectSets();
});
</script>
<style lang="scss" scoped>
:deep(.contract-dialog) {
	.el-dialog__header {
		background: #f7f7fa;
		margin-right: 0;
		padding: 15px 20px;
	}
}</style>
